export default class Meteor {
  constructor (ctx, x, h) {
    this.ctx = ctx
    ctx.clearRect(0, 0, x, h)
    this.x = Math.random() * x
    this.y = Math.random() * h
    this.length = Math.ceil(Math.random() * 30 + 20)
    this.angle = 30
    this.speed = 8
    let cos = Math.cos(this.angle * 3.14 / 180)
    let sin = Math.sin(this.angle * 3.14 / 180)
    this.width = this.length * cos
    this.height = this.length * sin
    this.offset_x = this.speed * cos
    this.offset_y = this.speed * sin
    this.alpha = 1
    this.color1 = 'rgba(56, 56, 56, 0.2)'
    this.color2 = 'rgba(0, 0, 0, 0.2)'
  }
  move () {
    let x = this.x + this.width - this.offset_x
    let y = this.y - this.height
    this.ctx.clearRect(x - 3, y - 3, this.offset_x + 5, this.offset_y + 5)
    this.x = this.x - this.offset_x
    this.y = this.y + this.offset_y
    this.draw()
  }
  draw () {
    let line = this.ctx.createLinearGradient(this.x, this.y, this.x + this.width, this.y + this.height)
    line.addColorStop(0, 'rgba(255, 255, 255, 0.5)')
    line.addColorStop(0.3, 'rgba(200, 200, 200, 0.2)')
    line.addColorStop(0.6, 'rgba(150, 150, 150, 0.2)')
    this.ctx.save()
    this.ctx.beginPath()
    this.ctx.lineWidth = 1
    this.ctx.globalAlpha = this.alpha
    this.ctx.strokeStyle = line
    this.ctx.moveTo(this.x, this.y)
    this.ctx.lineTo(this.x + this.width, this.y - this.height)
    this.ctx.closePath()
    this.ctx.stroke()
    this.ctx.restore()
  }
}
